<template>
  <view class="content">
    <view class="tabbar">
      <tabbarNormalVue />
    </view>
    <h2 class="title">tabbarNormalVue</h2>
    <view class="tabbar">
      <tabbarOneVue />
    </view>
    <h2 class="title">tabbarOneVue</h2>
    <view class="tabbar">
      <tabbarTwoVue />
    </view>
    <h2 class="title">tabbarTwoVue</h2>
    <view class="tabbar">
      <tabbarThreeVue />
    </view>
    <h2 class="title">tabbarThreeVue</h2>
    <view class="tabbar">
      <tabbarFourVue />
    </view>
    <h2 class="title">tabbarFourVue</h2>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import tabbarNormalVue from "@/components/tabbar/tabbar-normal.vue";
import tabbarOneVue from "@/components/tabbar/tabbar-one.vue";
import tabbarTwoVue from "@/components/tabbar/tabbar-two.vue";
import tabbarThreeVue from "@/components/tabbar/tabbar-three.vue";
import tabbarFourVue from "@/components/tabbar/tabbar-four.vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import Nav from "@/router";
import { onShow } from "@dcloudio/uni-app";
const title = ref("Tab3");
onMounted(() => {
  console.log(Nav.RouterData());
});
onShow(() => {
  console.log("show", Nav.RouterData());
});
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #aaaaaa;
}
.tabbar {
  width: 750rpx;
  height: 120rpx;
}
.title {
  margin-bottom: 100rpx;
}
</style>
